<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/layui/xm-select.js"></script>
    <style>
        .upload-group .upload-btn {
            height: 50px;
        }

        .upload-group .image-group {
            display: flex;
            flex-wrap: wrap;
        }

        .upload-group .image-group .image-item {
            height: 110px;
            width: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .upload-group .image-group .image-item:hover .img-opt {
            display: flex;
        }

        .upload-group .image-group .image-item .img-view {
            height: 100px;
            width: 100px;
            outline: 1px solid #333;
        }

        .upload-group .image-group .image-item .img-view img {
            display: block;
            height: 100%;
            width: 100%;
        }

        .upload-group .image-group .image-item .img-opt {
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: rgba(255, 255, 255, .5);
            display: none;
            align-items: center;
            justify-content: center;
        }


        .upload-group .image-group .image-item .img-opt i {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            width: 40px;
            font-size: 20px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div style="width: 95%;margin: 5px auto">
    <form class="layui-form">
        <input type="hidden" name="id" value="${banner.id}">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">广告名称</label>
            <div class="layui-input-block">
                <input type="text" value="${banner.name}" name="name" id="name" placeholder="广告名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="orderNum" class="layui-form-label">排序值</label>
            <div class="layui-input-block">
                <input type="text" value="${banner.orderNum}" name="orderNum" id="orderNum"
                       placeholder="排序值,值大靠前"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="href" class="layui-form-label">广告地址</label>
            <div class="layui-input-block">
                <input type="text" value="${banner.href}" name="href" id="href" placeholder="广告地址"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="target" class="layui-form-label">跳转方式</label>
            <div class="layui-input-block">
                <select name="target" id="target">
                    <option value="_self">当前页</option>
                    <option value="_blank">新页面</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="timeRange" class="layui-form-label">时间范围</label>
            <div class="layui-input-block">
                <input type="text" name="timeRange" id="timeRange" placeholder="选择广告有效期" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="status" class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item ">
            <label for="imageBtn" class="layui-form-label">广告图片</label>
            <input type="hidden" id="src" name="src">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" class="layui-btn" id="imageBtn">上传广告图片</button>
                    </div>
                    <div class="image-group" id="bannerImage">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button lay-submit class="layui-btn" lay-filter="update">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    let status = "${banner.status}";
    let src = "${banner.src}";
    let target = '${banner.target}';
    let timeRange;
    if (status) {
        $("#status").val(status);
        $("#target").val(target);
        setImage(src);
        timeRange = '${banner.expiresStart} - ${banner.expiresEnd}'
        console.log(timeRange)
    }
    var form;
    layui.use(function () {
        form = layui.form;
        const upload = layui.upload;
        const laydate = layui.laydate;
        laydate.render({
            elem: "#timeRange",
            type: "datetime",
            range: true,
            value: timeRange
        })
        upload.render({
            elem: "#imageBtn",
            url: "upload",
            data: {type: "banner"},
            acceptMime: 'image/*',
            size: 1024 * 1024 * 20,/*单位kb*/
            done(res) {
                if (res.code === 200) {
                    setImage(res.msg);
                }
            },
            error(e) {
                console.log(e);
                layer.msg('头像上传异常！', {icon: 2});
            }
        });
        form.on("submit(update)", function (data) {
            if (!data.field.src) {
                layer.msg('图片不能为空！', {icon: 2})
                return false;
            }
            const timeRange = data.field.timeRange;
            if (timeRange) {
                const times = timeRange.split(" - ");
                data.field.expiresStart = times[0];
                data.field.expiresEnd = times[1];
            }
            $.ajax({
                url: "admin/banner/update",
                data: data.field,
                method: "post",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg('操作成功！', {icon: 1}, function () {
                            /*获取当前窗口的标记值*/
                            const index = parent.layer.getFrameIndex(window.name);
                            /*关闭窗口*/
                            parent.layer.close(index);
                            /*刷新list中的表格*/
                            parent.table.reloadData('dataTable')
                        });
                    } else {
                        layer.alert(res.msg, {icon: 2});
                    }
                },
                error(e) {
                    layer.alert('服务器睡着了', {icon: 6})
                    console.log(e)
                }
            })
            return false;
        });
    })

    function setImage(fileName) {
        $("#src").val(fileName);
        if (fileName) {
            let $html = '<div class="image-item"><div class="img-view"><img src="static/upload/' + fileName + '" alt="' + fileName + '"></div><div class="img-opt"><i onclick="showImage(this)" title="查看原图" class="layui-icon layui-icon-search"></i><i onclick="delImage()" title="删除图片" class="layui-icon layui-icon-delete"></i></div></div>';
            $("#bannerImage").empty().append($html);
        } else {
            $("#bannerImage").empty();
        }

    }

    function delImage() {
        layer.confirm('确定删除该图片吗?', {icon: 3, title: "询问"}, function (index) {
            src = "";
            setImage(src);
            layer.close(index);
        })
    }

    function showImage(_this) {
        const fileName = $(_this).parents(".image-item").find('img').prop('alt')
        layer.photos({
            photos: {
                data: [{
                    alt: fileName,
                    src: 'static/upload/' + fileName
                }]
            }
        })
    }

</script>
</html>
